<template>
  <van-popup @close="close" v-model:show="show" style="min-width: 340px" class="p-4" round>
    <form @submit.prevent="submit">
      <div class="text-center font-bold mb-2">编辑提现信息</div>
      <div class="text-sm">
        <div class="mb-2">
          <div for="type">提现收款类型：</div>
          <select
            required
            v-model="formRef.type"
            name="type"
            id="type"
            class="border p-1 rounded w-full"
          >
            <option :value="0">微信</option>
            <option :value="1">支付宝</option>
            <option :value="2">银行卡</option>
            <option :value="3">USDT-TRC20</option>
          </select>
        </div>

        <div class="mb-2">
          <div for="name">收款姓名</div>
          <input
            required
            v-model="formRef.name"
            type="text"
            name="name"
            class="border rounded p-1 w-full"
          />
        </div>

        <div class="mb-2">
          <div for="account">收款账号</div>
          <input
            required
            v-model="formRef.card"
            type="text"
            name="account"
            class="border rounded p-1 w-full"
          />
        </div>

        <div class="mb-2" v-if="formRef.type == 2">
          <div for="amount">开户行</div>
          <select
            required
            v-model="formRef.bankId"
            name="type"
            id="type"
            class="border p-1 rounded w-full"
          >
            <option v-for="item in bankList" :key="item.key" :value="item.key">
              {{ item.value }}
            </option>
          </select>
        </div>

        <div class="mb-2">
          <div for="amount">收款码</div>
          <van-uploader
            required
            v-model="fileList"
            :after-read="uploadFile"
            :max-count="1"
            class="mt-1"
          >
            <button class="bg-blue-600 py-1 px-4 rounded text-white">请上传二维码</button>
          </van-uploader>
        </div>

        <div class="mb-2">
          <div for="remark">备注</div>
          <input
            v-model="formRef.remark"
            type="text"
            name="remark"
            class="border rounded p-1 w-full"
          />
        </div>
      </div>
      <div class="m-2 flex justify-between">
        <button
          @click="show = false"
          type="button"
          class="border border-white rounded text-black bg-gray-100 px-4 py-1"
        >
          返回
        </button>
        <button type="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
          保存
        </button>
      </div>
    </form>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref, onMounted, watch } from 'vue'
import { UploadApi } from '@/apis/user'
import { GetBankListApi, EditPaymentApi } from '@/apis/withdrawal'
import { showToast } from 'vant'

const emit = defineEmits(['update:show-modal', 'ok'])
const formRef = ref({
  name: '',
  card: '',
  type: null,
  qrcode: '',
  bankId: 0,
  remark: '',
  status: '1'
})
const bankList = ref([])
const fileList = ref([])

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default: () => {}
  }
})

onMounted(() => {
  GetBankListApi().then((res) => {
    const keys = Object.keys(res.list)
    keys.forEach((item) => {
      bankList.value.push({
        key: item,
        value: res.list[item]
      })
    })
  })
})

watch(
  () => props.item,
  (val) => {
    formRef.value = val
    if (val.qrcode) fileList.value = [{ url: val.qrcode }]
  }
)

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})

function submit() {
  if (formRef.value.qrcode == '') {
    showToast({
      type: 'fail',
      message: '请上传收款二维码'
    })
    return
  }
  EditPaymentApi(formRef.value).then((res) => {
    show.value = false
    emit('ok')
  })
}

function uploadFile(file: any) {
  file.status = 'uploading'
  file.message = '上传中...'

  UploadApi(file.file)
    .then((res) => {
      file.status = 'success'
      file.message = '上传成功'
      formRef.value.qrcode = res.file.full_url
    })
    .catch(() => {
      file.status = 'error'
      file.message = '上传失败'
    })
}

function close() {
  formRef.value = {}
}
</script>
